<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:include="include/header::html('趋势投资模拟回测')" ></head>

<body >
<script>
    $(function(){
	        var data4Vue = {
                indexes: [],
                currentIndex: '000300',
			};

            //ViewModel
            var vue = new Vue({
                el: '#workingArea',
                data: data4Vue,
                mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
                    this.init();
                    $("[data-toggle='tooltip']").tooltip();
                },
                methods: {
                    init:function(){
                        var url =  "http://127.0.0.1:8031/api-codes/codes";
                        axios.get(url).then(function(response) {
                            vue.indexes = response.data;
                        });
                    }
                }
            });
    });
    

</script>

<style>
table.inputTable{
	width:100%;
}
table.inputTable td{
	padding:20px 20px;
}

table{
	margin:20px;
}

div#workingArea{
	margin:50px;
}
</style>

<div id="workingArea">
	<span class="label label-info">回测参数</span>
	<table class="inputTable ">
		<tr>
			<td width="25%">
                <span data-toggle="tooltip" data-placement="top" title="选择某一个指数进行模拟回测">
                    请选择指数:<span class="glyphicon glyphicon-question-sign" > </span>
                </span>
			</td>
			<td width="25%">
				<select v-model="currentIndex" class="indexSelect form-control">
					<option v-for="bean in indexes " :value="bean.code">{{bean.name}} - ( {{bean.code}} )</option>
				</select>
			</td>
			<td></td>
			<td></td>
		</tr>
	</table>
</div>

<div th:replace="include/footer::html" ></div>

</body>
</html>
